// 序列号批次选择弹框
<template>
  <view @tap.stop>
    <uni-popup ref="popupRef" type="center" :safe-area="false">
      <!-- 序列号 -->
      <view class="popup" v-if="slots.type == 'serial'">
        <view class="pop-title">
          <view class="title">序列号录入</view>
          <view class="pop-close iconfont icon-guanbi" @tap="close"> </view>
        </view>
        <!-- 序列号 备注 -->
        <view class="check-item1">
          <label class="choose-label">
            <view class="check-box"> </view>
            <view class="choose-text">
              <view class="text-serail text-over-1"> 序列号 </view>
              <view class="text-remark text-over-1"> 备注 </view>
            </view>
          </label>
        </view>
        <!-- 序列号 -->
        <scroll-view scroll-y class="pop-content mes-card-check">
          <checkbox-group @change="checkChange">
            <view class="choose">
              <view
                v-for="(item, index) in serialList"
                class="check-item"
                :key="index"
              >
                <label class="choose-label">
                  <view class="check-box">
                    <checkbox
                      :value="item.serial"
                      :checked="item.checked"
                      class="choose-check"
                    />
                  </view>
                  <view class="choose-text">
                    <view class="text-serail text-over-1">{{
                      item.serial
                    }}</view>
                    <view class="text-remark text-over-1">{{
                      item.remark
                    }}</view>
                  </view>
                </label>
              </view>
            </view>
          </checkbox-group>
        </scroll-view>
        <!-- 按钮 -->
        <view class="pop-btn">
          <view class="btn" @tap="save"> 保存 </view>
        </view>
      </view>
      <!-- 批次 -->
      <view class="popup" v-else-if="slots.type == 'batch'">
        <view class="pop-title">
          <view class="title">批次录入</view>
          <view class="pop-close iconfont icon-guanbi" @tap="close"> </view>
        </view>
        <!-- 批次 备注 -->
        <view class="check-item1">
          <label class="choose-label">
            <view class="check-box"> </view>
            <view class="choose-text">
              <view class="text-serail text-over-1"> 批次 </view>
              <view class="text-remark text-over-1"> 生产日期 </view>
            </view>
          </label>
        </view>
        <!-- 批次 -->
        <scroll-view scroll-y class="pop-content mes-card-radio">
          <radio-group @change="radioChange">
            <view class="choose">
              <view
                v-for="(item, index) in batchList"
                class="check-item"
                :key="index"
              >
                <label class="choose-label">
                  <view class="check-box">
                    <radio
                      :value="item.batch_id"
                      :checked="item.checked"
                      class="choose-check"
                    />
                  </view>
                  <view class="choose-text">
                    <view class="text-serail text-over-1">{{
                      item.batch_name
                    }}</view>
                    <view class="text-remark text-over-1">{{
                      item.manufacture
                    }}</view>
                  </view>
                </label>
              </view>
            </view>
          </radio-group>
        </scroll-view>
        <!-- 按钮 -->
        <view class="pop-btn">
          <view class="btn" @tap="saveBatch"> 保存 </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  props: {
    row: Object,
    slots: Object
  },
  data() {
    return {
      serialList: [],
      batchList: []
    }
  },
  methods: {
    async open() {
      this.$refs.popupRef.open()
      let postForm = {}
      let api = ''
      if (this.slots.type == 'serial') {
        // 序列号
        if (this.slots.post_form) {
          // 通过slots传字段
          // post_form : {
          //   goods_code: 'goods_code',
          //   stores_id: 'stores_id',
          //   attribute_id: 'attribute_id',
          //   store_status: 'store_status'
          // }
          let form = this.slots.post_form
          postForm = {
            goods_code: this.row[form.goods_code || 'goods_code'],
            stores_id: this.row[form.stores_id || 'stores_id'],
            attribute_id: this.row[form.goods_attr || 'goods_attr'],
            store_status: this.row[form.store_status || 'store_status']
          }
        } else {
          // 默认字段
          postForm = {
            goods_code: this.row.goods_code,
            stores_id: this.row.stores_id,
            attribute_id: this.row.goods_attr,
            store_status: this.row.store_status
          }
        }
        // 接口赋值
        api = this.$api.warehouse.inventory_serial.getSerial
      } else if (this.slots.type == 'batch') {
        // 批次
        if (this.slots.post_form) {
          // 通过slots传字段
          // post_form: {
          //       goods_code: 'goods_code',
          //       stores_id: 'stores_id',
          //       goods_attr: 'goods_attr'
          //     },
          let form = this.slots.post_form
          postForm = {
            goods_code: this.row[form.goods_code || 'goods_code'],
            stores_id: this.row[form.stores_id || 'stores_id'],
            goods_attr: this.row[form.goods_attr || 'goods_attr']
          }
        } else {
          // 默认字段
          postForm = {
            goods_code: this.row.goods_code,
            stores_id: this.row.stores_id,
            goods_attr: this.row.goods_attr
          }
        }
        // 接口赋值
        api = this.$api.buy.common.getbranch
      }

      // 调取接口
      const res = await api(postForm)
      if (res.code == 200) {
        if (this.slots.type == 'serial') {
          // 赋值序列号
          if (res.data.list.length) {
            res.data.list.map((item) => (item.checked = false))
            this.row[this.slots.serialField || 'serial'].forEach((item) => {
              res.data.list.forEach((item1) => {
                if (item.serial == item1.serial) {
                  item1.checked = true
                }
              })
            })
            this.serialList = res.data.list
          }
        } else if (this.slots.type == 'batch') {
          // 赋值批次
          this.batchList = []
          if (res.data.length) {
            res.data.forEach((item) => {
              item.checked = false
              if (item.id == this.row.batch_id) {
                item.checked = true
              }
              this.batchList.push({
                batch_id: item.id,
                batch_name: item.batch_name,
                manufacture: item.manufacture,
                guarantee: item.guarantee,
                validity: item.validity,
                checked: item.checked
              })
            })
          }
        }
      }
    },
    // 选择序列号
    checkChange(e) {
      this.serialList.forEach((item) => {
        const findRes = e.detail.value.find((item1) => item.serial == item1)
        item.checked = Boolean(findRes)
      })
    },
    // 选择批次
    radioChange(e) {
      console.log(e)
      let checkValue = e.detail.value
      this.batchList.forEach((item) => {
        item.checked = false
        if (item.batch_id == checkValue) {
          item.checked = true
        }
      })
    },
    // 点击保存批次
    saveBatch() {
      let arr = this.batchList.find((item) => item.checked)
      if (!arr) {
        return this.$tools.toast('请选择批次')
      }
      if (this.slots.getBatch) {
        this.slots.getBatch(arr)
      } else {
        console.warn('请再slots内部定义getBatch')
      }
      this.$refs.popupRef.close()
    },
    // 点击保存
    save() {
      let newList = []
      this.serialList.forEach((item) => {
        if (item.checked) {
          newList.push({
            serial: item.serial,
            remark: item.remark
          })
        }
      })
      if (!newList.length) {
        return this.$tools.toast('请选择至少一个序列号')
      }
      if (this.slots.getSerial) {
        this.slots.getSerial(newList)
      } else {
        console.warn('请再slots内部定义getSerial')
      }
      this.$refs.popupRef.close()
    },
    close() {
      this.$refs.popupRef.close()
    }
  }
}
</script>

<style lang="less" scoped>
.popup {
  width: 702rpx;
  padding: 32rpx;
  background-color: #fff;
  border-radius: 16rpx;
  .pop-title {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .title {
      font-size: 28rpx;
    }
    .icon-guanbi {
      position: absolute;
      top: 0;
      right: 0;
      font-size: 30rpx;
      color: #979797;
    }
  }
  .pop-content {
    max-height: 40vh;
    .check-item {
      width: 638rpx;
      margin: 0 auto;
      border-bottom: 1px solid #eeeeee;
      .choose-label {
        padding: 36rpx 0;
        width: 100%;
        display: flex;
        align-items: center;
        &:first-child {
          margin-top: 0;
        }
        .check-box {
          width: 76rpx;
          // display: flex;
        }
        .choose-text {
          overflow: hidden;
          flex: 1;
          display: flex;
          .text-serail {
            width: 244rpx;
            text-align: left;
          }
          .text-remark {
            flex: 1;
            text-align: left;
            padding-left: 20rpx;
          }
        }
      }
    }
  }
  .check-item1 {
    width: 638rpx;
    margin: 0 auto;
    border-bottom: 1px solid #eeeeee;
    .choose-label {
      padding: 36rpx 0;
      width: 100%;
      display: flex;
      align-items: center;
      &:first-child {
        margin-top: 0;
      }
      .check-box {
        width: 76rpx;
        // display: flex;
      }
      .choose-text {
        overflow: hidden;
        flex: 1;
        display: flex;
        .text-serail {
          width: 244rpx;
          text-align: left;
        }
        .text-remark {
          flex: 1;
          text-align: left;
          padding-left: 20rpx;
        }
      }
    }
  }
  // 序列号按钮
  .pop-btn {
    margin-top: 20rpx;
    .btn {
      width: 638rpx;
      height: 80rpx;
      background: linear-gradient(90deg, #5cc1ff 0%, #1a96ff 100%);
      border-radius: 50rpx;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 36rpx;
      font-weight: 500;
      color: #ffffff;
    }
  }
}
</style>
